<script setup>
    import axios from 'axios';
    import router from '@/router';
    import {showMsg} from '@/components/Util';
    import {RouterLink} from 'vue-router';
    import Nav from '@/components/Nav.vue';
    import { onMounted} from 'vue';
    // import {useMenuStore} from '@/stores/menu'
    // import { ref,computed, onMounted, useTemplateRef, watchEffect, onUnmounted } from 'vue';
    // import { eventBus } from '@/components/evevtBus'

    //退出登录
    function logout(){
    axios.get('/api/logout').then(res =>{
        router.push('/');
        showMsg(res.data.msg,'info')
    })

    //更新用户名
    function getData(){
    axios.get('/api/user_list').then(res=>{
        if(res.data.status==200){
            list.value = res.data.data;
        }else{
            showMsg("数据获取失败",'error',2000);
        }   
    })
}
onMounted(()=>{
    getData();
})

};
</script>

<template>
    <div class="app">
    <div class="zuo">
        <span class="ls">lisi   欢迎你</span>
        <Nav></Nav>
        <div @click="logout" class="dl">退出登录</div>
    </div>
    <div class="right">
      <div class="top" ref="top">
        <!-- tab选择框 -->
        <!-- <ul class="tab" ref="tab" @click="reset">
        </ul> -->
         <RouterView v-slot="{ Component }">
                <KeepAlive>
                    <component :is="Component" />
                </KeepAlive>
         </RouterView>
        <div class="tabs-control icon-left" @click="tabLeft"></div>
        <div class="tabs-control icon-right" @click="tabRight"></div>
        </div>
    </div>
    </div>
</template>

<style scoped>
    *{
        padding: 0;
        margin: 0;
    }

    .box{
        margin:0 auto ;
    }

    /* 全部左右方向布局 */
    .app{
        display: flex;
        user-select: none;
        /* width: 1200px; */
    }

    .ls{
        height: 0px;
        margin-top: -30px;
        color: aqua;
    }

    .dl{
        font-size: 14px;
        color: white;
        cursor: pointer;
    }

    /* 左边css样式 */
    .zuo{
        width: 190px;
        height: 550px;
        background-color:rgb(31, 53, 59);
        /* cursor: pointer; */
        /* color: white; */
        display: flex;
        flex-direction: column;
        user-select: none;
        align-items: center;
        gap: 60px;
        padding-top: 100px;
        display: flex;
    }
    span{
        color: white;
        /* font-weight: bold; */
        font-size: 23px;
    }
    ul{
        color: rgb(173, 181, 187);
        cursor: pointer;
        /* border: 1px red solid; */
    }
    .dl:active {
      color: rgba(12, 218, 122, 0.98);
    }
    .right{
        width: 1100px;
        padding: 0 20px;
    }
</style>